<template>
    <div class="zlck">
        <div class="genInfon">个人信息</div>
   
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="tdfirst">会员昵称</td>
                <td class="tdtwo1">{{pehuiy.nickname}}</td>
                <td class="tdtwo2 imgtd" rowspan="6">
                    <div class="imgtde">
                        <a href="#">
                            <img :src="pehuiy.avatar" alt="">
                        </a>
                    </div>
                    <div class="imgtde"><span>{{pehuiy.nickname}}</span></div>
                    <div class="texttd imgtde">
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                    </div>
                    <div class="imgtde">最多输入600个字符！</div>
                    <div class="spantd imgtde">
                        <span class="spantdd">发送信息</span>
                        <span>常用信息</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="tdfirst">性别</td>
                <td class="tdtwo1">{{pehuiy.gender}}</td>

            </tr>
            <tr>
                <td class="tdfirst">qq</td>
                <td class="tdtwo1">{{pehuiy.qq}}</td>

            </tr>
            <tr>
                <td class="tdfirst">地址</td>
                <td class="tdtwo1">贵州</td>

            </tr>
            <tr>
                <td class="tdfirst">个性</td>
                <td class="tdtwo1">{{pehuiy.signature}}</td>

            </tr>
            <tr>
                <td class="tdfirst">自我介绍</td>
                <td class="tdtwo1">{{pehuiy.selfinTroduction}}</td>

            </tr>

        </table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    //父向子传值
    props: ['pehuiy'],
    // watch:{
    //     pehuiy(newValue){
    //         console.log(newValue,'00000000000000000000');   
    //     }
    // },
    // components:{},
    // mounted() {

    // }

})
</script>

<style lang="scss" scoped>
.genInfon {
 cursor: pointer;
}

table>tr {
    border: 0;
    width: 100px;

    >td {
        border: 1px solid #d7d7d7;
        height: 30px;
        padding: 7px 10px;
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
    }
}

table {
    height: 100%;
    width: 100%;
    display: table;
    border-collapse: collapse;
    // border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;

    .tdfirst {
        text-align: center;
        width: 60px;
    }

    .tdtwo1 {
        width: 243px;
    }
}

.imgtd {
    background: #f7fbff;

    .imgtde {
        text-align: center;
        margin-bottom: 4px;
        // margin-left: 20px;
    }
}

.imgtd img {
    margin-top: 5px;
    width: 100px;
    height: 100px;
}

.texttd textarea {
    background: url(../../assets/bg_textarea.png) no-repeat;
    border: 1px solid #ccc;
    width: 150px;
    height: 100px;
    padding: 5px;
}

.spantdd {
    background-color: #d06900;
    width: 90px;
    height: 25px;
    line-height: 24px;
    margin-right: 20px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-shadow: 1px -1px 1px #d06900;
}

.zlck {
    width: 789px;
    height: 300px;
    // border: 1px solid teal;
    margin: 50px auto;
}

.tdtwo2 {
    width: 150px;
}

// .imgtde{
//     width: 150px;
// }
</style>